<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    class="list-dialog"
    :before-close="handleClose">
    <div class="list-box">
      <div class="list-header">
        <h2>项目利益相关方脉络图</h2>
        <p v-if="type !== 'show'">
          <el-button type="warning" @click="addUnit">新增</el-button>
          <el-button type="danger" @click="deleteUnit">删除</el-button>
        </p>
      </div>
      <el-table
        v-if="tableFlag"
        :data="list"
        :span-method="objectSpanMethod"
        height="100%"
        border
        @selection-change='handleSelectionChange'
        style="width: 100%; margin-top: 20px">
        <el-table-column
          v-if="type !== 'show'"
          type="selection"
          header-align="center"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          prop="unit"
          header-align="center"
          align="center"
          label="单位">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.unit }}</span>
            <el-input v-else v-model="scope.row.unit"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          header-align="center"
          align="center"
          label="决策权重">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.weight }}</span>
            <el-input v-else v-model="scope.row.weight"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyName"
          header-align="center"
          align="center"
          label="名称">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.companyName }}</span>
            <el-input v-else v-model="scope.row.companyName"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="projectPerson"
          header-align="center"
          align="center"
          label="项目人员">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.projectPerson }}</span>
            <el-input v-else v-model="scope.row.projectPerson"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="department"
          header-align="center"
          align="center"
          label="部门">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.department }}</span>
            <el-input v-else v-model="scope.row.department"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="position"
          header-align="center"
          align="center"
          label="职位">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.position }}</span>
            <el-input v-else v-model="scope.row.position"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="role"
          header-align="center"
          align="center"
          label="角色">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.role }}</span>
            <el-input v-else v-model="scope.row.role"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="preference"
          header-align="center"
          align="center"
          label="偏好维度">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.preference }}</span>
            <el-input v-else v-model="scope.row.preference"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="stance"
          header-align="center"
          align="center"
          label="立场">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.stance }}</span>
            <el-input v-else v-model="scope.row.stance"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="opponentialStance"
          header-align="center"
          align="center"
          label="对竞对立场">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.opponentialStance }}</span>
            <el-input v-else v-model="scope.row.opponentialStance"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          header-align="center"
          align="center"
          label="备注">
          <template slot-scope="scope">
            <span v-if="type === 'show'">{{ scope.row.remarks }}</span>
            <el-input v-else v-model="scope.row.remarks"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type !== 'show'"
          label="操作"
          header-align="center"
          align="center"
          width="160
        ">
        <template slot-scope="scope">
          <el-link type="primary" @click="addSingle(scope)">新增</el-link>
          <el-link type="primary" @click="deleteSingle(scope.row)">删除</el-link>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'StakeholdersAddAndEdit',
  data() {
    return {
      title: '',
      // show/add/edit
      type: '',
      dialogVisible: false,
      list: [],
      // 需要合并的行信息
      mergeData: [],
      tableFlag: false,
      multipleSelection: []
    }
  },
  mounted() {
  },
  methods: {
    createMergeData() {
      this.mergeData = new Array(this.list.length).fill(0)
      let tempIndex = 0
      let tempName = ''
      this.list.map((item, index) => {
        if (tempName !== item.unit) {
          tempName = item.unit
          tempIndex = index
          this.mergeData[index] = 1
        } else {
          this.mergeData[index] = 0
          this.mergeData[tempIndex]++
        }
      })
      console.log(this.mergeData)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 4) {
        console.log(this.mergeData[rowIndex])
        if (this.mergeData[rowIndex] === 0) {
          return {
            rowspan: 0,
            colspan: 0
          }
        } else {
          return {
            rowspan: this.mergeData[rowIndex],
            colspan: 1
          }
        }
      }
    },
    handleOpen(type, item) {
      this.type = type
      if (this.type === 'show') {
        this.title = '查看'
        this.list = item
      }
      if (this.type === 'add') {
        this.title = '新增'
        this.list = []
      }
      if (this.type === 'edit') {
        this.title = '编辑'
        this.list = item
      }
      this.createMergeData()
      this.tableFlag = true
      this.dialogVisible = true
    },
    handleClose() {
      this.tableFlag = false
      this.dialogVisible = false
    },
    addUnit() {
      this.list.push({
        unit: '',
        weight: '',
        companyName: '',
        projectPerson: '',
        department: '',
        position: '',
        role: '',
        preference: '',
        stance: '',
        opponentialStance: '',
        layer: '',
        remarks: ''
      })
      this.createMergeData()
    },
    handleSelectionChange(val, a) {
      this.multipleSelection = val
    },
    deleteUnit() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.multipleSelection.map((obj) => {
          for (let i = this.list.length; i >= 0; i--) {
            const index = this.list.findIndex((item) => item.unit === obj.unit)
            if (index !== -1) this.list.splice(index, 1)
          }
        })
        this.createMergeData()
      }
    },
    addSingle({ $index, row }) {
      this.list.splice($index + 1, 0, {
        id: new Date().getTime(),
        unit: row.unit,
        weight: row.weight,
        companyName: row.companyName,
        projectPerson: '',
        department: '',
        position: '',
        role: '',
        preference: '',
        stance: '',
        opponentialStance: '',
        layer: '',
        remarks: ''
      })
      this.createMergeData()
    },
    deleteSingle(obj) {
      const index = this.list.findIndex((item) => item.id === obj.id)
      if (index !== -1) this.list.splice(index, 1)
      this.createMergeData()
    }
  }
}
</script>

<style>
.list-dialog .el-dialog {
  width: 95%;
  height: 95vh;
  margin: 2.5vh auto !important;
}
.list-dialog .el-dialog .el-dialog__body {
  height: calc(100% - 116px);
}
.list-dialog .el-dialog .el-dialog__body .list-box .list-header {
  margin-bottom: 15px;
  overflow: hidden;
}
.list-dialog .el-dialog .el-dialog__body .list-box .list-header>h2 {
  width: 50%;
  float: left;
}
.list-dialog .el-dialog .el-dialog__body .list-box .list-heade>p {
  width: 50%;
  float: left;
  text-align: right;
}
</style>

